<template>
  <lay-container fluid="true" style="padding: 10px;height: 100%;overflow-y: hidden">

    <lay-card>
      <lay-form style="margin-top: 20px" >
        <lay-row>

          <lay-col :md="18">
            <lay-row>
              <lay-col :md="12">
                <lay-form-item label="日期：" label-width="70">
                  <lay-date-picker v-model="qm.dtb" placeholder="开始日期" allowClear simple ></lay-date-picker>
                </lay-form-item>
              </lay-col>
              <lay-col :md="12">
                <lay-form-item label="~" label-width="10">
                  <lay-date-picker v-model="qm.dte" placeholder="截至日期" allowClear simple></lay-date-picker>

                </lay-form-item>
              </lay-col>
            </lay-row>

          </lay-col>


          <lay-col :md="6">
            <lay-form-item label-width="0">

              <lay-button type="primary" @click="toSearch">查询</lay-button>
              <lay-button @click="toReset">重置</lay-button>


            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>

    <lay-tab type="brief" v-model="seltab" class="emptytab"
             @change="showInfo"
    >
      <lay-tab-item title="图标" id="tb"></lay-tab-item>
      <lay-tab-item title="表格" id="bg"></lay-tab-item>
    </lay-tab>
    <div  style=" height:calc(100% - 200px);  overflow-x: hidden;overflow-y: hidden;">
      <component ref="mainRef" :is="componentType" :data="qm"   ></component>
    </div>

     

  </lay-container>
</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";
import MyWin from "../../library/MyWin";
import MyPage from "../../library/MyPage";
import {DateUtil} from "../../library/DateUtil";
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport";


import tb from "./qstchart.vue"
import bg from "./qsttable.vue"
import blank from "../htty/blank.vue"
export default {
  components: {  tb,bg, blank },
  props:{
     id:String 
  },

  setup(prop:any, context:any) {

    const mainRef=ref<any>()

    function toSearch() {
      query(1);
    }

    function toReset() {
      qm.key= '';
      qm.dtb=DateUtil.todayStr();
      qm.dte=DateUtil.todayStr();
    }

    const qm=reactive({
      
      key:prop.id,
      dtb:DateUtil.todayStr(),
      dte:DateUtil.todayStr(),
      page: 1,
      pageSize: 10,
      sortFields:"id desc"
    });
    const query=async (pageIndex:number) =>{

 
      if (""==qm.dtb||""==qm.dte){
          MyWin.alert("日期必须输入",{})
        return
      }        
      mainRef.value.query(qm,pageIndex)
    }

    const seltab=ref("bg")
    const componentType=ref("tb")
    
    const toSubmit=(event:any)=>{
        console.info(event)
    }
    const showInfo=async ()=>{
      componentType.value="blank";
      let componentType2=""
      switch (seltab.value){
        case "tb":
          componentType2="tb"
          break;
        case "bg":
          componentType2="bg"
          break;
      }
      setTimeout(function (){ 
        componentType.value=componentType2

        setTimeout(function (){ 
           query(1)
          },50)
      },50)

    }
    onMounted(() =>{
     
      setTimeout(function (){ 
        seltab.value="tb"
           showInfo()
          },100)

    });
    return {
      
      toReset,
      toSearch,


      qm,
      
     
      toSubmit,

      seltab,
      showInfo,
      componentType,

      mainRef,

    }
  }
}
</script>
<style  scoped >

.maintable-box{
  height: calc(100% - 140px);
}

</style>